顏色屬性:

顏色是網頁設計中的關鍵要素之一。CSS 提供了多種方式來定義顏色，包括以下幾種常見方式：

• 色彩名稱：如 red, blue, green 等。
• 十六進制：如 #ff0000（紅色）、#00ff00（綠色）、#0000ff（藍色）。
• RGB：如 rgb(255, 0, 0) 表示紅色。
• RGBA：與 RGB 相同，但添加透明度參數，如 rgba(255, 0, 0, 0.5) 表示半透明紅色。
• HSL：色相、飽和度、亮度，如 hsl(0, 100%, 50%) 表示紅色。
• HSLA：同樣帶有透明度，如 hsla(0, 100%, 50%, 0.5)。

常用屬性：

• color: 設置文本的顏色。
• background-color: 設置元素的背景顏色。

背景屬性:

常用屬性：

• background-color: 設置背景顏色。
• background-image: 設置背景圖片。
  示例： background-image: url('image.jpg');
• background-repeat: 控制背景圖片是否重複。
  • 值：repeat, no-repeat, repeat-x, repeat-y。
• background-position: 設置背景圖片的位置。
  • 值：center, top, bottom, left, right 或具體的像素值、百分比。
• background-size: 控制背景圖片的大小。
  • 值：auto, cover, contain 或具體的尺寸。
• background-attachment: 設置背景是否隨滾動而移動。
  • 值：scroll, fixed, local。

背景屬性的簡寫：

將多個背景屬性縮為一行

body {
  background: url('background.jpg') no-repeat center/cover #f4f4f4;
}

背景圖片的透明度與混合

*透過使用 rgba 或 hsla 可以設置背景顏色的透明度。
*背景圖片本身的透明度可以通過使用 opacity 或圖像處理來控制。

實作：創建一個帶有背景圖片和顏色的頁面

HTML：

<div class="header">
  <h1>歡迎來到我的網站</h1>
</div>

CSS：

.header {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明的背景色 */
  color: white; /* 設置文本顏色 */
  padding: 50px;
  text-align: center;
}

網頁呈下圖: